<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>数据导出 - 智驭安行系统</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="./css/data-export.css">
		<link rel="icon" href="./img/logo_nobackground.png" type="image/png">
	</head>
	<body>
		<div id="app">
			<!-- 页面头部 -->
			<header class="page-header">
				<div class="header-left">
					<h1>数据导出</h1>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>首页</el-breadcrumb-item>
						<el-breadcrumb-item>数据统计</el-breadcrumb-item>
						<el-breadcrumb-item>数据导出</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="header-right">
					<el-button-group>
						<el-button type="primary" @click="startExport">
							<i class="el-icon-download"></i> 开始导出
						</el-button>
						<el-button type="success" @click="batchExport">
							<i class="el-icon-folder-add"></i> 批量导出
						</el-button>
					</el-button-group>
				</div>
			</header>

			<!-- 主要内容区 -->
			<div class="main-content">
				<!-- 导出配置区域 -->
				<div class="export-config-section">
					<div class="config-header">
						<h3>导出配置</h3>
						<el-button type="text" @click="saveConfig">
							<i class="el-icon-star-off"></i> 保存配置
						</el-button>
					</div>
					<el-form :model="exportConfig" label-width="100px" class="config-form">
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="数据类型">
									<el-select v-model="exportConfig.dataType" placeholder="请选择数据类型">
										<el-option label="交通流量数据" value="traffic"></el-option>
										<el-option label="安全事件数据" value="safety"></el-option>
										<el-option label="车辆运行数据" value="vehicle"></el-option>
										<el-option label="系统日志数据" value="log"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="时间范围">
									<el-date-picker
										v-model="exportConfig.dateRange"
										type="daterange"
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="导出格式">
									<el-radio-group v-model="exportConfig.format">
										<el-radio label="csv">CSV</el-radio>
										<el-radio label="excel">Excel</el-radio>
										<el-radio label="json">JSON</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="数据编码">
									<el-select v-model="exportConfig.encoding" placeholder="请选择编码格式">
										<el-option label="UTF-8" value="utf8"></el-option>
										<el-option label="GBK" value="gbk"></el-option>
										<el-option label="GB2312" value="gb2312"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="导出字段">
							<el-checkbox-group v-model="exportConfig.fields">
								<el-checkbox label="timestamp">时间戳</el-checkbox>
								<el-checkbox label="location">位置信息</el-checkbox>
								<el-checkbox label="value">数值</el-checkbox>
								<el-checkbox label="status">状态</el-checkbox>
								<el-checkbox label="description">描述</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item label="导出说明">
							<el-input
								type="textarea"
								v-model="exportConfig.description"
								:rows="3"
								placeholder="请输入导出说明">
							</el-input>
						</el-form-item>
					</el-form>
				</div>

				<!-- 数据预览区域 -->
				<div class="data-preview-section">
					<div class="preview-header">
						<h3>数据预览</h3>
						<div class="preview-actions">
							<el-button-group>
								<el-button size="mini" @click="refreshPreview">
									<i class="el-icon-refresh"></i> 刷新
								</el-button>
								<el-button size="mini" @click="downloadSample">
									<i class="el-icon-download"></i> 下载样例
								</el-button>
							</el-button-group>
						</div>
					</div>
					<div class="preview-content" v-loading="previewLoading">
						<div class="preview-placeholder" v-if="!hasPreview">
							<i class="el-icon-document"></i>
							<p>请配置导出参数并点击预览</p>
						</div>
						<div class="preview-data" v-else>
							<el-table :data="previewData" style="width: 100%" height="400">
								<el-table-column prop="timestamp" label="时间戳" width="180"></el-table-column>
								<el-table-column prop="location" label="位置" width="150"></el-table-column>
								<el-table-column prop="value" label="数值" width="120"></el-table-column>
								<el-table-column prop="status" label="状态" width="100"></el-table-column>
								<el-table-column prop="description" label="描述"></el-table-column>
							</el-table>
						</div>
					</div>
				</div>

				<!-- 导出历史列表 -->
				<div class="history-section">
					<div class="section-header">
						<h3>导出历史</h3>
						<el-input
							placeholder="搜索导出记录"
							v-model="searchQuery"
							prefix-icon="el-icon-search"
							style="width: 200px">
						</el-input>
					</div>
					<el-table :data="exportHistory" style="width: 100%">
						<el-table-column prop="fileName" label="文件名" width="200"></el-table-column>
						<el-table-column prop="dataType" label="数据类型" width="120"></el-table-column>
						<el-table-column prop="exportTime" label="导出时间" width="180"></el-table-column>
						<el-table-column prop="format" label="格式" width="100"></el-table-column>
						<el-table-column prop="size" label="大小" width="100"></el-table-column>
						<el-table-column label="操作" width="200">
							<template slot-scope="scope">
								<el-button type="text" @click="downloadFile(scope.row)">下载</el-button>
								<el-button type="text" @click="deleteFile(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-container">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="[10, 20, 50, 100]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						// 导出配置
						exportConfig: {
							dataType: '',
							dateRange: [],
							format: 'excel',
							encoding: 'utf8',
							fields: ['timestamp', 'location', 'value'],
							description: ''
						},

						// 预览状态
						previewLoading: false,
						hasPreview: false,

						// 预览数据
						previewData: [
							{
								timestamp: '2024-03-20 10:00:00',
								location: '重庆市渝中区',
								value: '1234',
								status: '正常',
								description: '交通流量数据'
							},
							{
								timestamp: '2024-03-20 10:05:00',
								location: '重庆市江北区',
								value: '1567',
								status: '正常',
								description: '交通流量数据'
							}
						],

						// 导出历史
						exportHistory: [
							{
								fileName: 'traffic_data_20240320.xlsx',
								dataType: '交通流量数据',
								exportTime: '2024-03-20 14:30',
								format: 'Excel',
								size: '2.5MB'
							},
							{
								fileName: 'safety_events_20240319.csv',
								dataType: '安全事件数据',
								exportTime: '2024-03-19 16:45',
								format: 'CSV',
								size: '1.8MB'
							}
						],

						// 搜索
						searchQuery: '',

						// 分页
						currentPage: 1,
						pageSize: 10,
						total: 0
					}
				},
				methods: {
					// 开始导出
					startExport() {
						this.$message.success('开始导出数据...');
						// TODO: 实现导出逻辑
					},

					// 批量导出
					batchExport() {
						this.$message.info('批量导出功能开发中...');
						// TODO: 实现批量导出逻辑
					},

					// 保存配置
					saveConfig() {
						this.$message.success('导出配置保存成功');
						// TODO: 实现配置保存逻辑
					},

					// 刷新预览
					refreshPreview() {
						this.previewLoading = true;
						setTimeout(() => {
							this.hasPreview = true;
							this.previewLoading = false;
							this.$message.success('预览已刷新');
						}, 1000);
					},

					// 下载样例
					downloadSample() {
						this.$message.success('样例文件下载中...');
						// TODO: 实现样例下载逻辑
					},

					// 下载文件
					downloadFile(file) {
						this.$message.success(`下载文件：${file.fileName}`);
						// TODO: 实现文件下载逻辑
					},

					// 删除文件
					deleteFile(file) {
						this.$confirm(`确定要删除文件"${file.fileName}"吗？`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$message.success('文件已删除');
							// TODO: 实现文件删除逻辑
						});
					},

					// 处理分页大小变化
					handleSizeChange(val) {
						this.pageSize = val;
						// TODO: 重新加载数据
					},

					// 处理页码变化
					handleCurrentChange(val) {
						this.currentPage = val;
						// TODO: 重新加载数据
					}
				},
				mounted() {
					// 初始化数据
					this.total = this.exportHistory.length;
				}
			});
		</script>
	</body>
</html>